<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            body {
                counter-reset: OuterItemCount 5 InnerItemCount;
            }
            
            #outerlist > li:before {
                content: counter(OuterItemCount) ". ";
                counter-increment: OuterItemCount 2;
            }
            
            ul.innerlist > li:before {
                content: counter(InnerItemCount, lower-alpha) ". ";
                counter-increment: InnerItemCount;
            }
        </style>
    </head>
    <body>
                
        I like apples and oranges.
        
        I also like:
        
        <ul id="outerlist" style="list-style-type: none">
            <li>bananas</li>
            <li>mangoes, including: </li>
                <ul class="innerlist">
                    <li>Haden mangoes</li>
                    <li>Keitt mangoes</li>
                    <li>Kent mangoes</li>
                </ul>
            <li>cherries</li>
            <li>plums, including:
                <ul class="innerlist">
                    <li>Elephant Heart plums</li>
                    <li>Stanley plums</li>
                    <li>Seneca plums</li>
                </ul>
            </li>
            <li>peaches</li>
            <li>grapes</li>
        </ul>

        You can see other fruits I like <a href="fruitlist.html">here</a>.
    </body>
</html>
